<template>
  <div class="home">
    <div class="heard">
      <el-popover class="outBtn" placement="bottom" width="150" trigger="hover">
        <p @click="outLogin()">
          <i class="el-icon-switch-button"></i>
          退出登录
        </p>
        <button class="btn" slot="reference">
          <i class="el-icon-s-custom"></i>
          欢迎,{{userData.username}}
          <i class="el-icon-caret-bottom"></i>
        </button>
      </el-popover>
    </div>
    <div class="banner">
      <div class="list">
        <div class="top">
          <b class="first">HAPPY</b>
          <b class="seccord">MMALL</b>
        </div>
        <div class="tabList">
          <ul>
            <li>
              <router-link to="/firstYe">
                <div class="lag" :class="{'back':flag=='/firstYe'}">
                  <i class="el-icon-user-solid"></i>
                  <span>首页</span>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/good">
                <div class="lag">
                  <i class="el-icon-user-solid"></i>
                  <span>商品</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <div class="little" :class="{'back':flag=='/good'}">
                  <span>商品管理</span>
                </div>
              </router-link>
              <router-link to="/kind">
                <div class="little" :class="{'back':flag=='/kind'}">
                  <span>品类管理</span>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/order">
                <div class="lag">
                  <i class="el-icon-user-solid"></i>
                  <span>订单</span>
                  <i class="el-icon-arrow-down"></i>
                </div>

                <div class="little" :class="{'back':flag=='/order'}">
                  <span>订单管理</span>
                </div>
              </router-link>
            </li>
            <li>
              <router-link to="/users">
                <div class="lag">
                  <i class="el-icon-user-solid"></i>
                  <span>用户</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <div class="little" :class="{'back':flag=='/users'}">
                  <span>用户列表</span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="warp">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  computed:{
    flag(){
        return this.$route.path
    },
    userData(){
        return JSON.parse(localStorage.getItem("data"))
    }
  },
  created(){
    
  },
  methods:{
    dian(val){
        console.log();
    },
    outLogin(){
        localStorage.removeItem("data")
        this.$router.push('/login')
    }
  },
  watch:{
    flag(newVal){
        console.log(newVal);
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .heard {
    width: 100%;
    height: 60px;
    background-color: #fff;
    .outBtn {
      float: right;
      line-height: 60px;
      margin-right: 20px;
      .btn {
        color: gray;
        outline: 0;
        background-color: #fff;
        border: none;
      }
    }
  }
  .banner {
    flex: 1;
    .list {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background-color: #2b2e33;
      width: 260px;
      .top {
        box-sizing: border-box;
        width: 260px;
        height: 60px;
        display: flex;
        padding: 15px;
        .first {
          color: #2dafcb;
          font-weight: 700;
          font-size: 30px;
        }
        .seccord {
          color: #fff;
          font-weight: 700;
          font-size: 30px;
        }
      }
    }
    .tabList {
      span {
        color: #b5b5b5;
        font-size: 14px;
      }
      .lag {
        box-sizing: border-box;
        height: 54px;
        line-height: 54px;
        padding: 0 10px;
        cursor: pointer;
      }
      .little {
        box-sizing: border-box;
        height: 40px;
        background-color: #000;
        line-height: 40px;
        padding: 0 30px;
        cursor: pointer;
      }
      li {
        border-bottom: 1px solid hsla(210, 1%, 42%, 0.19);
        i{
            color: #fff;
        }
      }
    }
    .warp {
      box-sizing: border-box;
      padding: 20px 20px 20px 275px;
    }
  }
}
.back{
    background-color: #2dafcb!important;
    span{
        color: #fff;
    }
}
</style>